<template>
  <table class="my-table">
    <thead>
      <tr class="table_th">
        <th>排名</th>
        <th>地市</th>
        <th></th>
        <th>{{ mapInd == 2 ? "项目总数" : "金额（万元）" }}</th>
      </tr>
    </thead>
    <tbody>
      <vue3-seamless-scroll
        openWatch="true"
        :list="tableData"
        direction="up"
        :hover="true"
        :limitScrollNum="tableData.length"
        :step="step"
        :copyNum="0"
        :wheel="true"
        class="seamless-warp"
      >
        <tr class="table_td" v-for="(item, index) in tableData" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>
            <el-progress :show-text="false" style="margin: 0 auto" :text-inside="true" :percentage="(item.value / maxValues) * 100"> </el-progress>
          </td>
          <td>{{ item.value }}</td>
        </tr>
        <tr style="height: 150px"></tr>
      </vue3-seamless-scroll>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 接收参数
const tableData = ref<any>([]);
const step = ref(0);
const maxValues = ref(0);

const props = defineProps({
  housingSupplyStatsData: {
    type: Array,
    default: () => [],
  },
  mapInd: {
    type: Number,
    default: 0,
  },
});
const mapInd = props.mapInd;

let maxObj = props.housingSupplyStatsData.reduce((prev, current) => (prev.value > current.value ? prev : current));
maxValues.value = maxObj?.value;
watchEffect(() => {
  tableData.value = [];
  tableData.value = props.housingSupplyStatsData;
});
const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  if (tableData.value.length > 5) {
    step.value = viewportHeight * 0.0003;
  }
};
onMounted(() => {
  calculateStep();
  window.addEventListener("resize", calculateStep);
});
onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
});
</script>

<style lang="less" scoped>
::v-deep .el-progress-bar__outer {
  height: 12px !important;
  width: 100% !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
.my-table {
  position: relative;
}
.table_th {
  width: 100%;
  height: 38px;
  // background: linear-gradient(180deg, #011B3F 0%, rgba(37, 134, 238, 0.1) 100%);
  position: absolute;
  z-index: 1;
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 14px;
}
.table_th th:nth-child(1),
.table_th th:nth-child(2) {
  flex: 2; /* 宽度比例为1 */
}
.table_th th:nth-child(3) {
  flex: 4; /* 宽度比例为2 */
}
.table_th th:nth-child(4),
.table_th th:nth-child(5) {
  flex: 3; /* 宽度比例为1 */
}

.table_td {
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 39px;
  align-items: center;
  background: #092140;
}
.table_td td:nth-child(1),
.table_td td:nth-child(2) {
  text-align: center;
  flex: 2; /* 宽度比例为1 */
}
.table_td td:nth-child(3) {
  // text-align: center;
  flex: 4; /* 宽度比例为2 */
}
.table_td td:nth-child(4) {
  text-align: center;
  flex: 3; /* 宽度比例为2 */
}
.seamless-warp {
  height: 205px;
  overflow: hidden;
  margin-top: 38px;
}
.seamless-warp .table_td:nth-child(2n) {
  background: rgba(0, 0, 0, 0);
}
.seamless-warp .table_td:nth-last-child(1) {
  background: rgba(0, 0, 0, 0);
  padding-bottom: 39px;
}
.cl-5c {
  color: #5cc40c;
}
.cl-c4 {
  color: #c41e0c;
}
</style>
